<!--
 @description 异常问题项
 @fileName Item.vue
 @author zengqiongying
 @created 2023/06/18 15:45:28
-->
<template>
  <div class="abnormal-file-card">
    <div v-if="!readonly" class="f-head">
      <div class="input-field">
        <qmp-field
          v-model="formData.sortNumber"
          maxlength="10"
          placeholder="请输入序号"
          class="sort-number-field"
          clearable
        />
        <!-- type="number" -->
        <span v-if="verifySort" class="color-error">序号重复</span>
      </div>
      <div class="btn-del" @click.stop="onClickDelete"></div>
    </div>
    <div v-else class="f-head">
      {{ formData.sortNumber }}
    </div>
    <div class="image-container">
      <CheckImage
        v-model="formData.sysFileUrl"
        v-model:imageName="formData.imgOriginName"
        :readonly="readonly"
        v-bind="$attrs"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, watch, defineComponent, computed } from 'vue'
  import { IAnyKeyObject } from '@/types/common'
  import { initFormData } from '@/utils'
  import CheckImage from '@/views/components/CheckImage/index.vue'
  export default defineComponent({
    name: 'AbnormalFileItem',
    components: { CheckImage },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      sortNumberList: {
        type: Array,
        default: () => []
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:modelValue', 'delete'],
    setup(props, { emit }) {
      const datas = reactive<IAnyKeyObject>({
        formData: {
          //异常图片信息字段
          sortNumber: '', // 序号
          sysFileUrl: '', // 图片地址
          imgOriginName: '', //图片原始名称
          imgCustomName: '' //图片名称
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          initFormData(d, datas.formData)
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (d) => {
          if (![null, undefined, ''].includes(d.sortNumber)) {
            // const num = Math.floor(Number(d.sortNumber || 0) * 100) / 100
            let num = ''
            if (!isNaN(d.sortNumber)) {
              let tmp = `${d.sortNumber}`.split('.')
              num = `${tmp[0] || 0}`
              if (tmp.length > 1) {
                const dot = tmp[1].length > 2 ? tmp[1].substr(0, 2) : tmp[1]
                num += `.${dot}`
              }
            }
            // console.log(d.sortNumber, num)
            d.sortNumber = num
          }
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      // 校验是否有重复序号
      const verifySort = computed(() => {
        const value = datas.formData.sortNumber
        if (props.sortNumberList.length === 0 || [null, undefined, ''].includes(value)) {
          return false
        }
        return props.sortNumberList.filter((num) => Number(num) === Number(value)).length > 1
      })

      const onClickDelete = () => {
        emit('delete')
      }
      return {
        ...toRefs(datas),
        verifySort,
        onClickDelete
      }
    }
  })
</script>
<style lang="less" scoped>
  .abnormal-file-card {
    background: var(--bg-global-weaker);
    border-radius: var(--radius-xl);
    padding: 16px;
    margin-top: 8px;
    .f-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn-del {
        width: 20px;
        height: 20px;
        background: url(~@/assets/images/icon-del-red.png);
        background-size: 20px 20px;
        background-position: center;
        background-repeat: no-repeat;
      }
      /deep/ .sort-number-field {
        margin-right: 8px;
        width: 128px;
        background: var(--input-bg-disable);
        border-radius: var(--radius-l);
        border: 1px solid var(--input-line-active);
      }
      .input-field {
        flex: 1;
        margin-right: 10px;
        display: flex;
        align-items: center;
      }
    }
    .image-container {
      margin-top: 8px;
      width: 100%;
      height: 180px;
      position: relative;
    }
  }
</style>
